<template>
  <navbar title="行情">
    <template #right>
      <!-- <van-icon name="plus" style="color: #fff; font-size: 22px" @click="router.push({ path: '/addMarket' })" /> -->
      <span class="iconfont icon-zengjia" style="color: #fff; font-size: 22px; margin-left: 10px" @click="router.push({ path: '/addMarket' })" ></span>
      <span class="iconfont icon-bianji" style="color: #fff; font-size: 22px; margin-left: 10px" @click="router.push({ path: '/editMarket' })" ></span>
      <!-- <van-icon name="edit" style="color: #fff; font-size: 22px;margin-left: 10px;" @click="router.push({ path: '/editMarket' })" /> -->
    </template>
  </navbar>
  <div class="page">
    <div class="each-list" v-for="(item, index) in 10" :key="index" @click="handleTo">
      <div class="left-info">
        <div class="t">0.0.00%</div>
        <div class="left-name">AUNJPN</div>
        <div class="t">23:12:45 <b>↕</b> 120</div>
      </div>
      <div class="right-info">
        <div class="right-info-d1">
          <div class="right-info-d1-t">
            <div class="index-number" style="color: red"><span data-v-ac3f4f88="">97</span><span class="s1">.9</span><sup class="s2">3</sup></div>
          </div>
          <div>L:97.799</div>
        </div>
        <div class="right-info-d2">
          <div class="right-info-d1-t">
            <div class="index-number" style="color: rgb(0, 145, 255)">
              <span data-v-ac3f4f88="">97</span><span class="s1">.9</span><sup class="s2">5</sup>
            </div>
          </div>
          <div>H:98.124</div>
        </div>
      </div>
    </div>
    <tabbar />
  </div>
  <!-- <van-empty description="暂无数据" /> -->

  <!-- 面板 -->
  <van-action-sheet v-model:show="show" title="AUDJPY">
    <div class="flex">
      <div class="box" @click="router.push({ path: '/currency' })">新订单</div>
      <div class="box" @click="router.push({ path: '/echarts' })">图表</div>
      <div class="box" @click="handleLink(1)">属性</div>
      <div class="box" @click="handleLink(2)">市场统计</div>
    </div>
  </van-action-sheet>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { showDialog } from 'vant'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()
const active = ref(0)
// router
const router = useRouter()
const show = ref(false)

// dianji
const handleTo = () => {
  console.log(111)
  show.value = true
}

const handleLink =(type)=>{
  if(type==1){
    router.push({path:"/attribute", query:{name:'111'}})
  }else{
    router.push({path:"/marketInfo", query:{name:'111'}})
  }
}

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>
<style scoped lang="scss">
.read-the-docs {
  width: 300px;
  text-align: center;
}
.page {
  padding: 10px;
  // max-width: 375px;
  .left-name {
    font-size: 15px;
    font-weight: bold;
  }
  .index-number {
    font-size: 14px;
  }
  .s1 {
    font-size: 16px;
  }
}
.page .each-list {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.page .each-list .left-info .t {
  font-size: 12px;
  color: #babbbe;
}

.page .each-list .right-info {
  display: flex;
  color: #babbbe;
}

.page .each-list .right-info .right-info-d1 {
  margin-right: 10px;
}

.page .each-list .right-info .right-info-d1-t {
  font-weight: 700;
}

.flex{
  display: flex;
  flex-direction: column;
  .box{
    display: flex;
    padding: 10px;
  }
}
</style>
